<style lang="scss" scoped="">
	@import '../style.scss';
	.entry_title{
		width:100%;
		padding-left: 2vh;
		font-weight: bold;
		height:6vh;
		line-height: 6vh;
		font-size: 2vh;
		color:black;
	}
	.entry{
		height:7vh;
		line-height: 7vh;
		font-size: 2vh;
		color:black;
		padding-left: 2vh;
		width:100%;
	}
	.entry div{
		width:50%;
		float:left
	}
  .bhhslh{
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }

</style>
<template>
  <div class='my_card_outer_b' style="height:38vh;">
    <div class='my_card_b' style="height:36vh;" >
      <div class="my_card_title_b">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>租户各维度评分Top3
      </div>
      <div style="height:31vh;" ref="myEchart">
        <Row>
          <Col span='8'>
          <div class="entry_title">
            资源利用分数排名
          </div>
          <div v-for="(item, index) in util">
            <div class='entry'>
              <div class="bhhslh">{{item.tenant}}</div>
              <div>{{Math.round(item.util_dim_score)}}分</div>
            </div>
          </div>

          </Col>

          <Col span='8'>

          <div class="entry_title">
            资源合理性分数排名
          </div>
          <div v-for="(item, index) in reason">
            <div class='entry'>
              <div class="bhhslh">{{item.tenant}}</div>
              <div>{{Math.round(item.reason_dim_score)}}分</div>
            </div>
          </div>
          </Col>

          <Col span='8'>
          <div class="entry_title">
            资源产值分数排名
          </div>
          <div v-for="(item, index) in value">
            <div class='entry'>
              <div class="bhhslh"> {{item.tenant}}</div>
              <div>{{Math.round(item.value_dim_score)}}分</div>
            </div>
          </div>
          </Col>
        </Row>

      </div>
    </div>

  </div>


</template>

<script>
	import echarts from 'echarts'

	export default {
		name: 'b_diff_dim_rank',
		data() {
			return {
				"reason": [{
						"reason_dim_score": 86.3285779322505,
						"tenant": "国漫"
					},
					{
						"reason_dim_score": 81.3282157199625,
						"tenant": "防刷单"
					},
					{
						"reason_dim_score": 80.1000852080345,
						"tenant": "租户3"
					}
				],
				"util": [{
						"tenant": "人力",
						"util_dim_score": 80.6143159319366
					},
					{
						"tenant": "防刷单",
						"util_dim_score": 80.6141384336644
					},
					{
						"tenant": "租户6",
						"util_dim_score": 79.6710636659021
					}
				],
				"value": [{
						"tenant": "租户4",
						"value_dim_score": 77.04289240543577
					},
					{
						"tenant": "人力",
						"value_dim_score": 73.94755439149766
					},
					{
						"tenant": "租户3",
						"value_dim_score": 68.24185759361977
					}
				]
			}
		},
    watch: {
      listen_general_data: function(val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
        this.initChart(val)
      }
    },
    computed: {
      listen_general_data() {
        return this.$store.state.general_data;
      }
    },
		mounted() {
      if (this.$store.state.general_data!=0){
        this.initChart(this.$store.state.general_data);
      }

		},
		methods: {
			initChart(input_data) {
				this.reason=input_data.dim_top3['reason'];
				this.value=input_data.dim_top3['value'];
				this.util=input_data.dim_top3['util'];
			}
		}
	}
</script>
